<template>
  <div class="vip">
    <div class="vip-content">
      <div class="vip-title">交易明细</div>
      <div class="vip-content-box">
        <div class="vip-content-title">交易明细</div>
        <div class="title-line">
          <div class="line-txt">列表</div>
        </div>
        <div class="table-box">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="Approved by">
              <el-input
                v-model="formInline.user"
                placeholder="Approved by"
                clearable
              />
            </el-form-item>
            <el-form-item label="Activity zone">
              <el-select
                v-model="formInline.region"
                placeholder="Activity zone"
                clearable
              >
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="Activity time">
              <el-date-picker
                v-model="formInline.date"
                type="date"
                placeholder="Pick a date"
                clearable
              />
            </el-form-item>
            <el-form-item label="Activity time">
              <el-col :span="11">
                <el-date-picker
                  v-model="formInline.date1"
                  type="date"
                  placeholder="Pick a date"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="2" class="text-center">
                <span class="text-gray-500">-</span>
              </el-col>
              <el-col :span="11">
                <el-time-picker
                  v-model="formInline.date2"
                  placeholder="Pick a time"
                  style="width: 100%"
                />
              </el-col>
            </el-form-item>
            <el-form-item label="Activity zone">
              <el-select
                v-model="formInline.region"
                placeholder="Activity zone"
                clearable
              >
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">Query</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
          </el-table>
          <div class="pagination-box">
              <el-pagination background layout="prev, pager, next" :total="1000" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive } from "vue";
const formInline = reactive({
  user: "",
  region: "",
  date: "",
  date1: "",
  date2: "",
});

const onSubmit = () => {
  console.log("submit!");
};
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>
    
    <style scoped lang="less">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.pagination-box{
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}
.vip {
  padding: 1.5rem;
  box-sizing: border-box;
  .vip-content {
    width: 80rem;
    margin: 0 auto;
    // background: #fcf;
    padding: 2rem;
    box-sizing: border-box;
    .vip-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 1.125rem;
      color: #000000;
      line-height: 1.125rem;
      text-align: left;
      font-style: normal;
    }
    .vip-content-box {
      margin-top: 1.5rem;
      background: #fff;
      padding: 1.5rem;
      box-sizing: border-box;
      border-radius: 1rem;
      .vip-content-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 1.625rem;
        color: #000000;
        text-align: left;
        font-style: normal;
      }
      .title-line {
        border-bottom: 1px solid rgba(0, 0, 0, 0.85);
        margin: 2rem 0;
        .line-txt {
          width: 86px;
          height: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          background: rgba(0, 0, 0, 0.85);
          border-radius: 8px 8px 0px 0px;
        }
      }
      .vip-cards {
        // display: grid;
        // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        // gap: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style> 